<template>

  <el-skeleton v-for="item in 6"
               :key="item"
               class="item_card_bar"
               :loading="loading"
               animated
  >
    <template #template>
      <div class="item_card">
        <el-skeleton-item variant="text" class="item_text_title_loading" />
        <el-skeleton-item variant="text" class="item_text_content_loading" />
        <el-skeleton-item variant="image" class="item_img1_loading" />
        <el-skeleton-item variant="image" class="item_img2_loading" />
      </div>
    </template>
  </el-skeleton>

</template>

<script setup>
import {ref} from 'vue'

const loading = ref(true)

</script>

<style scoped>
.item_card_bar{
  width: 51vh;
  height: 28vh;
  margin: 1vh;
  background-color: #ffffff;
}

.item_card{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.item_text_title_loading{
  width: 45%;
  height: 12%;
  margin: 2%;
}
.item_text_content_loading{
  width: 40%;
  height: 8%;
  margin: 2%;
}
.item_img1_loading{
  width: 45%;
  height: 60%;
  margin: 2%;
}
.item_img2_loading{
  width: 45%;
  height: 60%;
  margin: 2%;
}

</style>